<template>
  <div>
    <a-card class="index-ant-card" size="small" title="供应商名录" style="height:350px">
      <a-button-group slot="extra">
        <a-button v-for="(val, index) in supplierList" :type="val.type" @click="supplierListChange(val)" :key="index">{{ val.name }}</a-button>
      </a-button-group>
      <a-list class="chart-list" size="small" :dataSource="infoData">
        <a-list-item slot="renderItem" slot-scope="item">
          <span class="title">{{ item.value }}</span>
          <span class="date">{{ item.tel }}</span>
        </a-list-item>
      </a-list>
    </a-card>
  </div>
</template>

<script>
export default {
  name: 'SupplierListModule',
  data() {
    return {
      isShowFirst: true,
      isShowSecond: false,
      isShowThird: false,
      supplierList: [
        { name: '设备供应商', type: 'primary' },
        { name: '施工方', type: '' },
        { name: '监理方', type: '' }
      ],
      infoData: [
        { value: '山西省美的集团有限公司', tel: '18899999999' },
        { value: '西门子股份公司', tel: '14555555977' },
        { value: '奥克斯集团有限公司', tel: '13578901234' },
        { value: '北京小米科技有限责任公司', tel: '18899999999' },
        { value: '海尔集团', tel: '18899999999' },
        { value: '山西省美的集团有限公司', tel: '14555555977' },
        { value: '艾欧史密斯(中国)热水器有限公司', tel: '18899999999' },
        { value: '三菱电气自动化有限公司', tel: '18899999999' }
      ]
    }
  },
  methods: {
    supplierListChange(val) {
      this.supplierList.forEach(ele => {
        ele.type = ''
      })
      val.type = 'primary'
      switch (val.name) {
        case '设备供应商':
          this.infoData = [
            { value: '山西省美的集团有限公司', tel: '18899999999' },
            { value: '西门子股份公司', tel: '14555555977' },
            { value: '奥克斯集团有限公司', tel: '13578901234' },
            { value: '北京小米科技有限责任公司', tel: '18899999999' },
            { value: '海尔集团', tel: '18899999999' },
            { value: '山西省美的集团有限公司', tel: '14555555977' },
            { value: '艾欧史密斯(中国)热水器有限公司', tel: '18899999999' },
            { value: '三菱电气自动化有限公司', tel: '18899999999' }
          ]
          return
        case '施工方':
          this.infoData = [
            { value: '艾欧史密斯(中国)热水器有限公司', tel: '18899999999' },
            { value: '山西省美的集团有限公司', tel: '18899999999' },
            { value: '西门子股份公司', tel: '14555555977' },
            { value: '北京小米科技有限责任公司', tel: '18899999999' },
            { value: '海尔集团', tel: '18899999999' },
            { value: '奥克斯集团有限公司', tel: '13578901234' },
            { value: '山西省美的集团有限公司', tel: '14555555977' },
            { value: '三菱电气自动化有限公司', tel: '18899999999' }
          ]
          return
        case '监理方':
          this.infoData = [
            { value: '北京小米科技有限责任公司', tel: '18899999999' },
            { value: '山西省美的集团有限公司', tel: '18899999999' },
            { value: '西门子股份公司', tel: '14555555977' },
            { value: '奥克斯集团有限公司', tel: '13578901234' },
            { value: '三菱电气自动化有限公司', tel: '18899999999' },
            { value: '海尔集团', tel: '18899999999' },
            { value: '山西省美的集团有限公司', tel: '14555555977' },
            { value: '艾欧史密斯(中国)热水器有限公司', tel: '18899999999' }
          ]
      }
    }
  }
}
</script>

<style lang="less" scoped>
// 数据可视化列表
.chart-list {
  .ant-list-item {
    /deep/.ant-list-item-content {
      justify-content: space-between;
    }
  }
}
</style>
